<template>
  <div>
    <div class="page-title" style="width:100%">下达任务列表</div>
    <div class="page-content">
      <el-row :gutter="10">
        <el-form label-width="87px" :inline="true" :model="filterQuery">
          <el-form-item label="检查时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="filterQuery.startDate"
                style="width: 100%;"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="filterQuery.endDate" type="date" placeholder="选择日期"></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="任务状态" prop="category">
            <el-select v-model="filterQuery.status" placeholder="请选择任务状态" style="width:200px" clearable>
              <el-option
                v-for="item in statuss"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>&nbsp;&nbsp;&nbsp;
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleClick">查询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <div class="page-list">
      <el-row style="padding:10px; border-top: 2px dashed #dddddd;text-align:center">
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="560"
          highlight-current-row
          border
          v-loading="loading"
        >
          <el-table-column prop="round" label="轮次" align="center"></el-table-column>
          <el-table-column label="执行周期" width="300" align="center">
            <template slot-scope="props">
              <div>{{ props.row.startDate}}~{{ props.row.endDate}}</div>
            </template>
          </el-table-column>

          <el-table-column prop="issueStaffName" label="下达人员" align="center"></el-table-column>
          <el-table-column prop="execStaffName" label="接收人员" align="center"></el-table-column>
          <el-table-column prop="status" label="接收状态" width="150" align="center"></el-table-column>
          <el-table-column prop="receiveDate" label="接收时间" align="center"></el-table-column>
          <!--<el-table-column label="操作" width="300" align="center">
            <template slot-scope="scope">
              <router-link :to="{name: 'CQPersonTaskIssueExec', params: {taskRow: scope.row}}">
                <el-button type="primary" size="mini">执行任务</el-button>
              </router-link>
              <el-button
                type="primary"
                size="mini"
                class="task_delete"
                v-if="scope.row != '接收'"
                @click="acceptTask(scope.row)"
              >接收任务</el-button>
            </template>
          </el-table-column>-->
        </el-table>
        <div class="pagination-base">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="filterQuery.pageIdx"
            :page-size="filterQuery.pageSize"
            :total="total"
            background
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <el-dialog title="接收任务" :visible.sync="dialogVisible">
      <task-detail :personCenter="true" :personTaskRow="currentRow"></task-detail>
    </el-dialog>
  </div>
</template>

<script>
import {QueryExcTask,GetLoginPersonName} from "../../../services/personCenterTaskIssue";
//import {GetLoginPersonName} from '../../../services/cq_problem_acceptance'
//import { getDay } from "../../cq_task_management/task_management/time";
import Vue from "vue";
import VueCookies from "vue-cookies";
import TaskDetail from "../../cq_task_management/task_management/details2.vue";
import { GetCurrentUser } from "../../../store/CurrentUser";

Vue.use(VueCookies);
export default {
  components: {
    TaskDetail
  },
  data() {
    return {
      tableData: [],
      loading: false,
      filterQuery: {
        startDate: "",
        endDate: "",
        status: "",
        pageIdx: 1,
        pageSize: 10,
        issueStaffID: "" // GetCurrentUser().issueStaffID
        //issueStaffName: "",
      },
      dialogVisible: false,
      total: 0,
      statuss: [
       {
          label: "已接收",
          value: "已接收"
        },
        {
          label: "未接收",
          value: "未接收"
        }
      ],
      currentRow: {}
    };
  },
  created() {
    //this.init();
  },
  mounted() {
    this.getLoginPerson();
    this.handleGetDate();
    this.loadFilterParams();
  },
  computed: {
    currentUser() {
      return GetCurrentUser();
    }
  },
  methods: {
    handleGetDate(){
			let showDate =new Date();
			let seperator ='-';
			let year = showDate.getFullYear();
			let month = showDate.getMonth() + 1;
      let month1=month-1
      let month2=month+2
      let year1=year
      let year2=year
			var strDate = showDate.getDate();
			if(month === 1){
				month1=month+11
        year1=year-1
        month2=month+2
        year2=year
      }
      if(month >10 && month <= 12){
        month2=month-10
        year2=year+1
      }
			if (month > 1 && month <= 12) {
					month = "0" + month;           
			}
			// if (strDate >= 0 && strDate <= 9) {
			// 		strDate = "0" + strDate;
      // }
     
			
			this.filterQuery.startDate = year1 + seperator + month1 + seperator + strDate;
			this.filterQuery.endDate= year2 + seperator + month2 + seperator + strDate;
			//this.dateRange=[ this.filterQuery.issueDate1, this.filterQuery.issueDate2]
  },
  formatDate (date) {
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		m = m < 10 ? '0' + m : m;
		var d = date.getDate();
		d = d < 10 ? ('0' + d) : d;
		return y + '-' + m + '-' + d;  
	}, 
    //获取当前登陆人
    getLoginPerson() {
      GetLoginPersonName().then(res => {
        //console.log(JSON.stringify(res))
        
        this.filterQuery.issueStaffID = res.data.employeeID;
        this.filterQuery.issueStaffName = res.data.name;
        console.log('this.filterQuery', this.filterQuery)
        this.loaddata(this.filterQuery);
      });
    },
    //任务状态变为已接受
    acceptTask(row) {
      this.dialogVisible = true;
      this.currentRow = row;
    },
    handlePageChange(page) {
      this.filterQuery.pageIdx = page;
      this.loaddata(this.filterQuery);
    },
    loadFilterParams() {
      //从query读取过滤条件
      //this.filterQuery = {...filterQuery, ...this.$route.query}
      //从query中取到的参数是string的,要转成element要求的number
      this.filterQuery = {
        ...this.filterQuery,
        pageIdx: parseInt(this.filterQuery.pageIdx, 10),
        pageSize: parseInt(this.filterQuery.pageSize, 10)
      };
    },
    init() {
      // this.filterQuery.startDate = getDay();
      // this.filterQuery.endDate = getDay();
    },
    handleClick() {
      console.log("aaa", this.filterQuery);
      this.loaddata(this.filterQuery);
    },
    loaddata(filterQuery) {
      console.log("filterQuery", filterQuery);
      QueryExcTask(filterQuery)
        .then(res => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.filterQuery.pageIdx = res.data.page;
          this.loading = false;
          console.log("this.tableData", this.tableData);
        })
        .catch(e => {
          console.log("e", e);
          // let mockData = [{
          //   "actuaInspectionTimes":"0",
          //   "companyCode":"00030210",
          //   "plannedInspectionTimes":"2",
          //   "staffID":"11766",
          //   "staffName":"汪继芳",
          //   "supervisionTaskCode":"G01-202003201251116_11766",
          //   "taskItem":"60129",
          //   "taskType":"作业队"
          // }]
          // this.tableData = mockData
        });
    }
  }
};
</script>

<style scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.search-label {
  display: flex;
}
.line {
  text-align: center;
}
.page-content {
  margin-top: 35px;
}
.task_delete {
  margin-left: 20px;
}
</style>